---
{
	"title": "Meter polyfill",
	"language": "en",
	"category": "Polyfills",
	"description": "Emulates meter element support for browsers that do not have support. The meter element displays a scalar measurement in a known range.",
	"tag": "meter",
	"parentdir": "meter",
	"altLangPrefix": "meter",
	"css": ["demo/meter"],
	"js": ["demo/meter"],
	"dateModified": "2014-02-19"
}
---
<section>
	<h2>Purpose</h2>
	<p>The HTML5 <code>meter</code> element displays a scalar measurement within a known range. Because some browsers do not support this functionality natively, this polyfill emulates the same functionality using generic HTML and WAI-ARIA.</p>

	<section>
		<h3>Description that is included in HTML5</h3>
		<blockquote cite="https://www.w3.org/TR/html5/forms.html#the-meter-element">
			<p>The <code>meter</code> element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.</p>
			<p>This is also known as a gauge.</p>
			<p>The <code>meter</code> element should not be used to indicate progress (as in a progress bar). For that role, HTML provides a separate <code>progress</code> element.</p>
			<p>The <code>meter</code> element also does not represent a scalar value of arbitrary range — for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value.</p>
		</blockquote>
	</section>
</section>

<section>
	<h2>Examples</h2>

	<table class="table table-striped">
		<thead>
			<tr>
				<th scope="col">Description</th>
				<th scope="col">Min</th>
				<th scope="col">Low</th>
				<th scope="col">Value</th>
				<th scope="col">Max</th>
				<th scope="col">High</th>
				<th scope="col">Result</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Normal (75%)</td>
				<td>20</td>
				<td>n/a</td>
				<td>65</td>
				<td>80</td>
				<td>n/a</td>
				<td><meter min="20" value="65" max="80">75% (normal)</meter></td>
			</tr>
			<tr>
				<td>Too high (90%)</td>
				<td>0</td>
				<td>n/a</td>
				<td>90</td>
				<td>100</td>
				<td>80</td>
				<td><meter min="0" value="90" max="100" high="80">90% (too high)</meter></td>
			</tr>
			<tr>
				<td>Too low (15%)</td>
				<td>100</td>
				<td>120</td>
				<td>115</td>
				<td>200</td>
				<td>180</td>
				<td><meter min="100" low="120" value="115" max="200" high="180">15% (too low)</meter></td>
			</tr>
			<tr>
				<td colspan="3"><button class="btn btn-default" id="decreaseMeter" type="button">Decrease</button></td>
				<td colspan="3"><button class="btn btn-default" id="increaseMeter" type="button">Increase</button></td>
				<td><meter id="updateTest" min="100" low="120" value="150" max="200" high="180"><span class="wb-inv">150</span></meter></td>
			</tr>
		</tbody>
	</table>

	<details class="mrgn-bttm-md">
		<summary>View code</summary>
		<section>
			<h3>HTML</h3>
			<pre><code>&lt;table class=&quot;table table-striped&quot;&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th scope=&quot;col&quot;&gt;Description&lt;/th&gt;
			&lt;th scope=&quot;col&quot;&gt;Min&lt;/th&gt;
			&lt;th scope=&quot;col&quot;&gt;Low&lt;/th&gt;
			&lt;th scope=&quot;col&quot;&gt;Value&lt;/th&gt;
			&lt;th scope=&quot;col&quot;&gt;Max&lt;/th&gt;
			&lt;th scope=&quot;col&quot;&gt;High&lt;/th&gt;
			&lt;th scope=&quot;col&quot;&gt;Result&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;td&gt;Normal (75%)&lt;/td&gt;
			&lt;td&gt;20&lt;/td&gt;
			&lt;td&gt;n/a&lt;/td&gt;
			&lt;td&gt;65&lt;/td&gt;
			&lt;td&gt;80&lt;/td&gt;
			&lt;td&gt;n/a&lt;/td&gt;
			&lt;td&gt;&lt;meter min=&quot;20&quot; value=&quot;65&quot; max=&quot;80&quot;&gt;75% (normal)&lt;/meter&gt;&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Too high (90%)&lt;/td&gt;
			&lt;td&gt;0&lt;/td&gt;
			&lt;td&gt;n/a&lt;/td&gt;
			&lt;td&gt;90&lt;/td&gt;
			&lt;td&gt;100&lt;/td&gt;
			&lt;td&gt;80&lt;/td&gt;
			&lt;td&gt;&lt;meter min=&quot;0&quot; value=&quot;90&quot; max=&quot;100&quot; high=&quot;80&quot;&gt;90% (too high)&lt;/meter&gt;&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;Too low (15%)&lt;/td&gt;
			&lt;td&gt;100&lt;/td&gt;
			&lt;td&gt;120&lt;/td&gt;
			&lt;td&gt;115&lt;/td&gt;
			&lt;td&gt;200&lt;/td&gt;
			&lt;td&gt;180&lt;/td&gt;
			&lt;td&gt;&lt;meter min=&quot;100&quot; low=&quot;120&quot; value=&quot;115&quot; max=&quot;200&quot; high=&quot;180&quot;&gt;15% (too low)&lt;/meter&gt;&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td colspan=&quot;3&quot;&gt;&lt;button class=&quot;btn btn-default&quot; id=&quot;decreaseMeter&quot; type=&quot;button&quot;&gt;Decrease&lt;/button&gt;&lt;/td&gt;
			&lt;td colspan=&quot;3&quot;&gt;&lt;button class=&quot;btn btn-default&quot; id=&quot;increaseMeter&quot; type=&quot;button&quot;&gt;Increase&lt;/button&gt;&lt;/td&gt;
			&lt;td&gt;&lt;meter id=&quot;updateTest&quot; min=&quot;100&quot; low=&quot;120&quot; value=&quot;150&quot; max=&quot;200&quot; high=&quot;180&quot;&gt;&lt;span class=&quot;wb-inv&quot;&gt;150&lt;/span&gt;&lt;/meter&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;</code></pre>
		</section>

		<section>
			<h3>JavaScript (demo only)</h3>
			<pre><code>(function( $, wb ) {
&quot;use strict&quot;;

$( document ).on( &quot;click&quot;, &quot;#increaseMeter, #decreaseMeter&quot;, function( event ) {
	var $elm = $( &quot;#updateTest&quot; ),
		increase = event.currentTarget.id === &quot;increaseMeter&quot;,
		valuenow = parseInt( $elm.attr( &quot;value&quot; ), 10 ),
		limit = parseInt( $elm.attr( increase ? &quot;max&quot; : &quot;min&quot; ), 10 ),
		change = increase ? 1 : -1,
		newValue = valuenow === limit ? 0 : valuenow + change;

	$elm
		.attr( &quot;value&quot;, newValue )
		.find( &quot;span&quot; )
			.text( newValue );

	// Update the visuals
	$elm.trigger( &quot;wb-update.wb-meter&quot; );
});

})( jQuery, wb );</code></pre>
		</section>
	</details>
</section>
